<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
		
		/*练习：1.圆形  2.正三角形
		思路1：宽高与边框倒脚一致
		思路2：div#d1  css中：抓到div
		            左边框：50像素实线红色
		            右边框：50像素实线黄色
		            下边框：50像素实现黑色
		            注意：先别加宽高  transport  透明色
		            				 */
		div#circle{
			width: 400px;
			height:400px;
			border: 1px solid red;
			border-radius: 50%;
			/*边框阴影 box-shadow 属性*/
			box-shadow:5px 5px 50px 50px red inset;
		}
/*思路2：div#triangle  css中：抓到div
	左边框：50像素实线红色
	右边框：50像素实线黄色
	下边框：50像素实现黑色
	注意：先别加宽高  transport  透明色*/
	div#triangle{
	width: 0;
	/*border-left: 50px solid transparent;
     border-right: 50px solid transparent;
	border-bottom: 50px solid black;*/
	/*两行：倒三角，蓝色 透明度 .3
	提醒：所有边框：50px solid transparent
	上边框改成蓝色 0，0，255
	*/
	border: 50px solid transparent;
	border-top-color:rgba(0,0,255,.3);
					}
		input{
			outline:1px soild red;
		}
		 /*实际应用： 通配选择器 去掉轮廓
		 *{outline:0}
		 */
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>